<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品详情</title>
		<link rel="stylesheet" type="text/css" href="css/style.css" />
		<link rel="stylesheet" type="text/css" href="css/product/flexslider.css" />
		<link rel="stylesheet" type="text/css" href="css/product/revolution-slider.css" />
		<link rel="stylesheet" type="text/css" href="css/product/style.css" />
		<link rel="stylesheet" type="text/css" href="//unpkg.com/element-ui@2.12.0/lib/theme-chalk/index.css" />
		<script src="//unpkg.com/vue/dist/vue.js"></script>
		<script src="//unpkg.com/element-ui@2.12.0/lib/index.js"></script>
		<style>
			.zoom-img {
				width: 100%;
				height: 100%;

			}

			.product-view-area {
				padding: 0rem;
			}

			.itemSoer {
				width: 50%;
				height: 2rem;
				display: flex;
				float: left;
			}

			.itemTab {
				width: 10.375rem;
				height: 100%;
				cursor: pointer;
				font-weight: 800;
				color: #999999;
			}

			.itemChoice {
				background: rgb(0, 125, 54);
				color: white;

			}
		</style>

	</head>
	<body>
		<div style="width: 100%;" class="divCenter">
			<div style="width: 75rem;" class="divColumn">
				<span style="margin: 0.625rem 0rem;">首页>村里的货>酒</span>
				<div style="width: 100%;height: 25rem;" class="divRow">
					<div class="product-view-area" id="goodGllery">
						<div class="product-big-image col-xs-12 col-sm-5 col-lg-5 col-md-5">
							<div class="large-image"> <a :href="bigPic" class="cloud-zoom" id="zoom1" rel="useWrapper: false, adjustY:0, adjustX:20">
									<img class="zoom-img" :src="bigPic" alt="products"> </a> </div>
						</div>
						<div style="width: 26.875rem;height: 5.625rem;" class="flexslider" id="flexslider1">
							<ul class="slides">
								<li v-for="(item,index) in goodList">
									<div style="width: 24.2rem;height: 5.625rem;border: 0.0625rem solid #F0F0F0;padding: 0rem 1.25rem;" class="divRow divColumnCenter">
										<a style="width: 25%;height: 90%;" href="#" class="divCenter" v-for="(item,index_) in item.data" @click="itemClick(index,index_)">
											<img :src="item" style="width: 5rem;height: 5rem;" />
										</a>

									</div>
								</li>

							</ul>
							<div style="padding-right: 0.25rem;z-index: 999;width: 26.875rem;height: 0.0625rem;margin-top:5.375rem;" class="flex-direction-nav leftAndRight">
								<li><a class="flex-prev" href="#"><img src="img/left_img.png" style="margin-left: 0.25rem;"></img></a></li>
								<li style="margin-left: 6.25rem;"><a class="flex-next" href="#"><img src="img/right_img.png"></a></li>
							</div>

						</div>
					</div>
					<div class="divColumn" style="margin-top: 0.625rem;height: 37.5rem;" id="goodDetails">
						<h4>荷兰品牌丨Nutrilon牛栏</h4>
						<h3 style="margin-top: 0.625rem;width: 37.5rem;">洋河蓝色经典 海之蓝 42度 240ml*2瓶 礼盒装 口感绵柔浓香型白酒洋河蓝色经典 海之蓝 42度 240ml*2瓶 礼盒装
						</h3>
						<div style="width: 37.5rem;height: 7.5rem;background:rgba(248,248,248,1);margin-top: 0.625rem;padding-left: 0.9375rem;font-weight: 600;color: #999999;"
						 class="divColumn">
							<div style="width: 100%;height: 2.5rem;" class="divRow divColumnCenter">
								<span style="line-break: 1.25rem;letter-spacing: 0.9375rem;margin-right: 0.9375rem;">价格</span>
								<span style="text-decoration: line-through;font-weight: 37.5rem;">¥450.00</span>
							</div>

							<div style="width: 100%;height: 2.5rem;" class="divRow divColumnCenter">
								<span style="line-break: 1.25rem;letter-spacing: 0.25rem;margin-right: 0.9375rem;">特别价</span>
								<span style="font-weight: 800;font-size: 1.125rem;color: #007D36;">¥420.00</span>
							</div>
							<div style="width: 100%;height: 2.5rem;" class="divRow divColumnCenter">
								<span style="line-break: 1.25rem;letter-spacing: 0.25rem;margin-right: 0.9375rem;">本店活动</span>
								<span style="font-weight: 600;color: #007D36;">满858元 减18元</span>
							</div>
						</div>
						<div style="margin-top: 0.625rem;padding-left: 0.9375rem;font-weight: 600;color: #999999;">
							<div style="width: 100%;height: 2.5rem;" class="divRow divColumnCenter">
								<span style="line-break: 1.25rem;letter-spacing:0.9375rem;margin-right: 0.9375rem;">运费</span>
								<span style="font-weight: 37.5rem;color: black;">山东济南至 长沙</span>
								<span style="font-weight: 37.5rem;color: black;margin-left: 1.25rem;">快递:0.00</span>
							</div>

						</div>
						<div style="margin-top: 0.625rem;padding-left: 0.9375rem;font-weight: 600;color: #999999;">
							<div style="width: 100%;height: 2.5rem;" class="divRow divColumnCenter">
								<span style="line-break: 1.25rem;letter-spacing:0.9375rem;margin-right: 0.9375rem;">数量</span>
								<div style="height: 2rem;" class="divRow divColumnCenter">
									<span style="width: 5rem;height: 100%;border: 0.0625rem solid #F0F0F0;text-align: center;line-height: 2rem;color: #000000;font-weight: 400;"
									 v-html="goodCount"></span>
									<div style="width: 1.875rem;height: 100%;margin-left: 0.25rem;margin-right: 0.625rem;" class="divColumn">
										<div style="width: 100%;height: 42%;border: 0.0625rem solid #F0F0F0;" class="divCenter" @click="add()">
											<img src="img/top_img.png" />
										</div>
										<div style="width: 100%;height: 42%;border: 0.0625rem solid #F0F0F0;margin-top: 0.0625rem;" class="divCenter"
										 @click="subtract()">
											<img src="img/arrow_img.png" />
										</div>
									</div>
									<span>件</span>
									<span style="margin-left: 0.625rem;">库存8888件</span>
								</div>
							</div>
						</div>
						<!-- 立即购买，加入购物车 -->

						<div style="width: 25rem;height: 5rem;margin-left: 5.3125rem;font-weight: 600;" class="divRow divColumnCenter">

							<div style="width: 6.25rem;height: 1.875rem;background: #BCEDC7;border: 0.0625rem solid #007D36;color: #007D36;cursor: pointer;"
							 class="divCenter" @click="buyNow">
								立即购买
							</div>
							<div style="width: 6.25rem;height: 1.875rem;background: #007D36;border: 0.0625rem solid #007D36;color: white;margin-left: 1.125rem;cursor: pointer;"
							 class="divCenter" @click="adCar()">
								加入购物车
							</div>
						</div>


						<!-- 服务承诺 -->
						<div style="width: 25rem;height: 7.5rem;margin-top: 0.625rem;padding-left: 0.9375rem;font-weight:600;font-size: 0.625rem;"
						 class="divColumn divColumnCenter">
							<div style="width: 100%;height: 2.5rem;" class="divRow divColumnCenter">
								<span style="line-break: 1.25rem;margin-right: 0.9375rem;color:#999999 ;">服务承诺</span>
								<span>不支持七天无理由退换正品保证极速退款</span>
							</div>
							<div style="width: 100%;height: 2.5rem;" class="divRow divColumnCenter">
								<span style="line-break: 1.25rem;margin-right: 0.9375rem;color:#999999 ;">支付方式</span>
								<div class="divRow divColumnCenter">
									<img src="img/pay1_img.png" />
									<span style="margin-left: 0.25rem;">蚂蚁花呗</span>
								</div>

								<div class="divRow divColumnCenter" style="margin-left: 1.25rem;">
									<img src="img/pay2_img.png" />
									<span style="margin-left: 0.25rem;">信用卡支付</span>
								</div>
								<div class="divRow divColumnCenter" style="margin-left: 1.25rem;">
									<img src="img/pay3_img.png" />
									<span style="margin-left: 0.25rem;">余额宝</span>
								</div>

							</div>


						</div>


					</div>
				</div>

				<!-- 推荐精品 -->
				<div style="width: 100%;height: 15rem;margin-top: 10rem;border: 0.0625rem solid #F0F0F0;" class="divColumn" id="recommend">

					<div style="width: 100%;height: 2rem;border: 0.0625rem solid #007D36;">
						<div style="width: 6.25rem;height: 2rem;color: white;background: #007D36;height: 100%;font-weight: 600;font-size: 0.625rem;"
						 class="divCenter">精品推荐</div>
					</div>
					<div style="width: 75rem;height: 12.875rem;" class="flexslider" id="flexslider2">
						<ul class="slides">
							<li v-for="(item,index) in recomList">
								<div style="width: 75rem;height:12.875rem;" class="divRow divColumnCenter">
									<div style="width: 12.6%;height: 92%;margin: 0px 2%;border: 0.0625rem solid #F0F0F0;" class="divColumn" v-for="(item,index_) in item.data"
									 @click="itemGoodClick(index_)">
										<div style="width: 100%;height: 70%;" class="divCenter">
											<img :src="item.img" style="width: 90%;height: 100%;object-fit: cover;" />
										</div>
										<div style="width: 100%;height: 30%;font-weight: 600;padding-left: 0.25rem;" class="divColumn divRowCenter">
											<h3 style="color: #007D36;">￥188.00</h3>
											<h4 style="color: #999999;">新西兰进口 宝利来...</h4>
										</div>
									</div>
								</div>

							</li>
						</ul>
						<div style="z-index: 999;height: 0.0625rem;margin-top: 1.625rem;margin-right: 0.625rem;" class="flex-direction-nav leftAndRight">
							<li><a class="flex-prev" href="#"><img src="img/left_img.png" style="margin-left: 0.25rem;"></img></a></li>
							<li><a class="flex-next" href="#"><img src="img/right_img.png"></a></li>
						</div>
					</div>
				</div>
				<!-- 相关分类 -->
				<div style="width: 100%;margin-top: 1.25rem;height: 100%;" class="divRow" id="sort">

					<div style="width: 20%;" class="divColumn">
						<div style="width: 100%;height: 2.5rem;border: 0.0625rem solid #F0F0F0;color: #999999;font-weight: 600;background: #DCDCDC;"
						 class="divCenter">

							相关分类

						</div>
						<div style="width: 100%;height: auto;border: 1px  solid #F0F0F0;color: #999999;">
							<div class="divCenter itemSoer">黑茶</div>
							<div class="divCenter itemSoer">黑茶</div>
							<div class="divCenter itemSoer">黑茶</div>
							<div class="divCenter itemSoer">黑茶</div>
							<div class="divCenter itemSoer">黑茶</div>
							<div class="divCenter itemSoer">黑茶</div>
							<div class="divCenter itemSoer">黑茶</div>
						</div>
						<div style="width: 100%;height: auto;border: 0.0625rem solid #F0F0F0;margin-top: 1.25rem;padding-bottom: 1.25rem;"
						 class="divColumn divColumnCenter">
							<div style="width: 100%;height: 2.625rem;background: #DCDCDC;color: #999999;" class="divCenter">
								最近上新

							</div>
							<div style="width: 94%;height: 16.25rem;margin-top: 0.9375rem;" class="divColumn divColumnCenter" v-for="(item,index) in newGoods">
								<div>
									<img src="https://img10.360buyimg.com/n7/jfs/t1/70783/17/9500/209396/5d7247f1E206bb1a5/553640a2a2902fed.jpg"
									 style="width: 100%;height: 90%;object-fit: contain;" />
								</div>
								<div style="width: 100%;height: 16%;border: 0.0625rem solid #F0F0F0;font-weight: 600;" class="divCenter">
									<span>大闸蟹，美味无比</span>
								</div>



							</div>
						</div>
					</div>
					<div style="width: 2%;"></div>
					<div style="width: 78%;height:100%;" class="divColumn">
						<div style="width: 100%;height: 2.5rem;" class="divRow">
							<div style="height: 100%;width: 31.125rem;border: 0.0625rem solid #F1F1F1;" class="divRow">
								<div class="divCenter itemTab" :class="{itemChoice:choi1}" @click="details()">
									<span>商品详情</span>
								</div>
								<div style="width: 0.0625rem;height: 100%;background: #F1F1F1;"></div>
								<div class="divCenter itemTab" :class="{itemChoice:choi2}" @click="recommendClick()">
									<span>商品评价(50)</span>
								</div>
								<div style="width: 0.0625rem;height: 100%;background: #F1F1F1;"></div>
								<div class="divCenter itemTab" :class="{itemChoice:choi3}" @click="afterSale()">
									<span>售后保障</span>
								</div>
							</div>
							<div style="width: 10.375rem;height: 100%;background: #007D36;margin-left: 17.5rem;cursor: pointer;" class="divCenter"
							 @click="addCar2()">
								<h3 style="color:white;">加入购物车</h3>
							</div>
						</div>
						<div style="width: 100%;height: 0.0625rem;background: #007D36;"></div>
						<div style="width: 100%;height: 100%;">
							<iframe :src="toUrl" style="width: 100%;background: white;" frameborder="0" scrolling="no" id="external-frame"
							 onload="iFrameHeight()"></iframe>
						</div>
					</div>






				</div>







			</div>

		</div>
		<div style="width: 100%;height: 12.5rem;"></div>
		<script src="js/jquery-2.1.4.js"></script>
		<script src="js/jquery.flexslider.js"></script>
		<script src="js/cloud-zoom.js"></script>
		<script>
			$(function() {
				$("#flexslider1").flexslider({
					animation: "slide",
					slideshowSpeed: 3000, //展示时间间隔ms
					animationSpeed: 400, //滚动时间ms
					touch: true, //是否支持触屏滑动
					pauseOnHover: true,
					randomize: false,
					slideshow: false,
					directionNav: true,
					mousewheel: true, //Boolean: mousewheel鼠标滚轮控制制图片滑动
					controlNav: false, //Boolean:  usage是否显示控制菜单//什么是控制菜单？

				});
				$("#flexslider2").flexslider({
					animation: "slide",
					slideshowSpeed: 6000, //展示时间间隔ms
					animationSpeed: 2000, //滚动时间ms
					touch: true, //是否支持触屏滑动
					pauseOnHover: true,
					randomize: false,
					slideshow: true,
					directionNav: true,
					mousewheel: true, //Boolean: mousewheel鼠标滚轮控制制图片滑动
					controlNav: false, //Boolean:  usage是否显示控制菜单//什么是控制菜单？

				});
			});
			var goodGllery = new Vue({
				el: '#goodGllery',
				data: {
					goodList: [{
							data: [
								'https://img11.360buyimg.com/n7/jfs/t1/60862/37/8457/290662/5d6394ddE063eba4a/d5467f8fd75cbcc0.jpg',
								'https://img12.360buyimg.com/n7/jfs/t16618/94/1119847334/569795/907dd4ea/5abc9b99N9c04cb3f.jpg',
								'https://img10.360buyimg.com/n7/jfs/t1/68870/6/9059/236588/5d6f4f8fEca72d073/096df95fa1958637.jpg',
								'https://img11.360buyimg.com/n7/jfs/t23599/33/1023857972/481446/25bbc64b/5b4aaa8aNbf0240d3.jpg'
							]

						},
						{
							data: [
								'https://img14.360buyimg.com/n7/jfs/t1/56004/39/9635/507781/5d6d1539E31de3c8c/697761448247677d.jpg',
								'https://img14.360buyimg.com/n7/jfs/t1/70926/36/9049/160085/5d6d1786Eb35e1fe5/671d37d1430fb907.jpg'
							]

						}

					],
					bigPic: 'https://img11.360buyimg.com/n7/jfs/t1/60862/37/8457/290662/5d6394ddE063eba4a/d5467f8fd75cbcc0.jpg'

				},
				methods: {
					itemClick: function(index, index_) {
						goodGllery.bigPic = goodGllery.goodList[index].data[index_];
					}
				}
			});
			var recommend = new Vue({
				el: '#recommend',
				data: {

					recomList: [{
							data: [{
									img: 'https://img13.360buyimg.com/n7/jfs/t1/51361/13/9678/175659/5d7116ccE5f251736/8c35fadc669d48b2.jpg'
								},
								{
									img: 'https://img11.360buyimg.com/n7/jfs/t1/60862/37/8457/290662/5d6394ddE063eba4a/d5467f8fd75cbcc0.jpg'
								},
								{
									img: 'https://img13.360buyimg.com/n7/jfs/t1/57124/10/4696/252476/5d2573c1E31515320/d7ff1e1a03aae3bd.jpg'
								},
								{
									img: 'https://img10.360buyimg.com/n7/jfs/t1/70783/17/9500/209396/5d7247f1E206bb1a5/553640a2a2902fed.jpg'
								},
								{
									img: 'https://img12.360buyimg.com/n7/jfs/t1/80662/22/9440/154102/5d71250dE83e2be9e/8c7bf1520cef88c5.jpg'
								},
								{
									img: 'https://img13.360buyimg.com/n7/jfs/t1/83583/39/3566/284958/5d1c6a7dE9ff6ce0b/fc4d57d3a5ccb88a.jpg'
								},
							]
						},
						{
							data: [{
									img: 'https://img13.360buyimg.com/n7/jfs/t1/51361/13/9678/175659/5d7116ccE5f251736/8c35fadc669d48b2.jpg'
								},
								{
									img: 'https://img13.360buyimg.com/n7/jfs/t18625/189/801927950/394056/eb40620b/5aa9e51fN72110ffd.jpg'
								},
								{
									img: 'https://img13.360buyimg.com/n7/jfs/t23104/127/1780252499/511233/732c04ea/5b6912bdN5ffe0b0b.jpg'
								},
								{
									img: 'https://img11.360buyimg.com/n7/jfs/t1/65053/30/276/129274/5ce7adf9E4ede4847/3b68f841d6e1cbb6.jpg'
								},
								{
									img: 'https://img11.360buyimg.com/n7/jfs/t24946/363/218554528/503006/f580e86d/5b691213N6246f1cc.jpg'
								}
							]


						}
					]

				},
				methods: {

					itemGoodClick: function(index_) {
						location.href = 'goodDetails.html';
					}

				}
			});


			var goodDetails = new Vue({
				el: '#goodDetails',
				data: {
					goodCount: 1,
				},
				methods: {
					buyNow: function() {
						window.parent.location.href = 'sureOrder.html'

					},
					adCar: function() {
						this.$message({
							message: '加入购物车成功',
							type: 'success'
						});
					},
					add: function() {
						goodDetails.goodCount++;
					},
					subtract: function() {
						if (goodDetails.goodCount > 1) {

							goodDetails.goodCount--;
						}

					}



				}


			})



			window.onload = function() {
				var iframe_obj = document.getElementById("external-frame");
			}

			function iFrameHeight() {
				var ifm = document.getElementById("external-frame");
				if (ifm) {
					if (ifm && !window.opera) {
						if (ifm.contentDocument && ifm.contentDocument.body.offsetHeight) {
							ifm.height = ifm.contentDocument.body.offsetHeight;
						} else if (ifm.Document && ifm.Document.body.scrollHeight) {
							ifm.height = ifm.Document.body.scrollHeight;
						}
						//alert(ifm.height);
						//SetTitle();
					}
				}
			}

			var sort = new Vue({
				el: '#sort',
				data: {
					newGoods: ['', '', ''],
					choi1: false,
					choi2: true,
					choi3: false,
					toUrl: 'comment.html',

				},
				methods: {
					details: function() {
						sort.choi1 = true;
						sort.choi2 = false;
						sort.choi3 = false;
						sort.toUrl = 'details.html';

					},
					recommendClick: function() {
						sort.choi1 = false;
						sort.choi2 = true;
						sort.choi3 = false;
						sort.toUrl = 'comment.html';

					},
					afterSale: function() {
						sort.choi1 = false;
						sort.choi2 = false;
						sort.choi3 = true;
						sort.toUrl = 'after_sale.html';
					},
					addCar2: function() {
						this.$message({
							message: '加入购物车成功',
							type: 'success'
						});
					}


				}
			})
		</script>
	</body>
</html>
